<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-ajax/iron-ajax.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/iron-input/iron-input.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/polymer/polymer-element.html">

<dom-module id="upper-app">
  <template>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  
    <iron-ajax auto url="[[requestURL]]" handle-as="text" last-response="{{data}}">
    </iron-ajax>

    <div class="form-group">
      <iron-input bind-value="{{data}}">
        <input type="text" class="form-control" id="field" placeholder="Enter text..." />
      </iron-input>
      <button class="btn btn-primary" href="#" role="button" on-click="clicked">To Upper</button>
    </div>

  </template>
  <script>
    class Upper extends Polymer.Element {
      static get is() {
        return 'upper-app';
      }

      static get properties() {
        return {
          requestURL: {
            type: String
          },
          data: {
            type: String
          }
        }
      }
      clicked() {
        this.requestURL = this.ownerDocument.location.origin + '/rest/upper/' + this.data;
      }
    }
    customElements.define(Upper.is, Upper);
  </script>
</dom-module>